<template>
  <section class="Task_con_box clearfix inConbox">
    <!-- -------teb切换 路楼层 -----  -->
    <!-- <ul class="task_UL_teb dip ju_al" id="searchBarS" :class="{'isFixed':this.searchBarFixedS}"> -->
    <ul class="task_UL_teb dip ju_al isFixed" id="searchBarS">
        <li class="task_li_text tran_op" v-for="(liList,index) in tebli" :key="index" :class="{'li_active':liList.ind}" @click="isshow(index,liList.prace)" >{{liList.text}}</li>
        <!-- <a class="task_li_text tran_op" v-for="(liList,index) in tebli" :key="index" :class="{'li_active':liList.ind}" :href="liList.prace" @change="isshow()">{{liList.text}}</a> -->
    </ul>
    <!-- <div class="deta_service_active2" :class="{'deta_service_active':this.deta_service}"> -->
    <div class="deta_service_active2" id="paraceOffseTop">
      <!-- -------选项（行业1）------- -->
      <aside class="task_list_item1 clearfix dipW ju_al" id="prace1">
        <hgroup class="list_title">您希望制作哪个行业的宣传内容？</hgroup>
        <ol class="list_con_type_box dipW ju_al_bet">
          <li class="list_text_con dipW ju_al " v-for="(typeList,index) in listtype" :key="index" @click="isIMGtype(index)" :class="{'list_text_con_active':typeList.ind}">
            <i>
              <img :src="'./static/images/task/'+typeList.img+''" alt="">
            </i>
            <span>{{typeList.text}}</span>
          </li>
        </ol>
      </aside>
      <!-- -------选项（类型2）-------->
      <aside class="task_list_item1 clearfix dipW ju_al" id="prace2">
        <hgroup class="list_title">您希望制作什么类型的宣传内容？</hgroup>
        <!-- <ol class="list_con_type_box poster_box dipW">
          <li class="list_type_poster bdr" v-for="(poster,index) in posterList" :key="index" :style="'background-image:url(./static/images/task/'+poster.img+');'+'background-position-x: right;'+'background-position-y: top;'+'background-size: 100%;'+'background-repeat: no-repeat;'">
            <div class="dipW ju_al poster_bg" @click="isIMGlist(index)" :class="{'list_type_poster_active':poster.ind}">
            </div>
          </li>
        </ol> -->
        <ol class="list_con_type_box dipW ju_al_bet iconsingseas_top">
          <li class="list_text_con dipW ju_al " v-for="(typeList,index) in posterList" :key="index" @click="isIMGlist(index)" :class="{'list_text_con_active':typeList.ind}">
            <i>
              <img :src="'./static/images/task/'+typeList.img+''" alt="">
            </i>
            <span>{{typeList.text}}</span>
          </li>
        </ol>
        <p class="list_con_iconsingseas bdr dip ju_al" @click="getposterdilaste()">
          <span class="dialse_lf">什么是海报、宣传片？</span>
          <span class="dialse_lr"><img src="../../../static/images/task/dialse.png" alt=""></span>
        </p>
      </aside>
      <!-- -------选项（需求3）-------->
      <aside class="task_list_item1 clearfix dipW ju_al" id="prace3">
        <hgroup class="list_title">这是您的需求</hgroup>
        <div class="list_con_type_box dipW over_fled">
          <!-- 类型 -->
          <select name="cars" class="bdr input_celect_items clear_bg " v-model="listtypeS"  @change="chengIFCLick(listtype,listtypeS,'listtypeSindex')">
            <option v-for="(option,index) in listtype" :key="index"  :value="option.text" class="option_styler tran_op">  
              {{option.text}}  
            </option> 
            <!-- <input type="text" v-if="false" v-model="listtypeSindex" value="option.parameter"> -->
          </select>
          <!-- 海报 -->
          <select name="cars" class="bdr input_celect_items clear_bg" v-model="postertypeS" @change="chengIFCLick(posterList,postertypeS,'postertypeSindsex')">
            <option v-for="(optionmm,index) in posterList" :key="index" :value="optionmm.text" class="option_styler tran_op">  
              {{optionmm.text}}  
            </option>  
          </select>
          <!-- 数量 -->
          <div class="bdr input_celect_items clear_bg input_celect_modelBPX" :class="{'Inputactive':this.number1s}">
            <p class="bdr" v-text="this.number != '' ? this.number : '请输入您希望制作的数量'" :class="{'color_model_ipt':this.number != ''}"></p>
            <select name="cars" class="bdr input_celect" v-model="number" @change="bordernumber()" @blur="bordernumberfcx()">
              <option v-for="(optionmm,index) in ordernumberS" :key="index" :value="optionmm.dayStext" class="option_styler tran_op"  >  
                {{optionmm.dayStext}}  
              </option>  
            </select>
          </div>
          <!-- 金额 -->
          <div class="bdr input_celect_items clear_bg input_celect_modelBPX" :class="{'Inputactive':this.contmosryget1s}" >
            <p class="bdr" v-text="this.contmosryget != '' ? this.contmosryget : '请选择作品的单价'" :class="{'color_model_ipt':this.contmosryget != ''}"></p>
            <select name="cars" class="bdr input_celect" v-model="contmosryget" @change="bordercontmosryget()" @blur="bordercontmosrygetfcx()">
              <option v-for="(optionmm,index) in contmosrygetS" :key="index" :value="optionmm.dayStext" class="option_styler tran_op">  
                {{optionmm.dayStext}}  
              </option>  
            </select>
          </div>
          <!-- 时间 -->
            <!-- <select name="cars" class="bdr input_celect_items clear_bg number" v-model="daySnumberD" @change="chengIFCLick(daySnumber,daySnumberD,'daySnumberDindex')">
            <option v-for="(optionmm,index) in daySnumber" :key="index" :value="optionmm.text" class="option_styler tran_op" >  
              {{optionmm.text}}  
            </option>  
            </select> -->
          <div class="bdr input_celect_items clear_bg input_celect_modelBPX number" :class="{'Inputactive':this.daySnumberD1s}">
            <p class="bdr" v-text="this.daySnumberD != '' ? this.daySnumberD : '请选择您的时间要求'" :class="{'color_model_ipt':this.daySnumberD != ''}"></p>
            <select name="cars" class="bdr input_celect" v-model="daySnumberD" @change="chengIFCLick(daySnumber,daySnumberD,'daySnumberDindex')" @blur="chengIFCLickfcx()">
              <option v-for="(optionmm,index) in daySnumber" :key="index" :value="optionmm.text" class="option_styler tran_op">  
                {{optionmm.text}}  
              </option>  
            </select>
          </div>



          <!-- 收货人姓名 -->
          <!-- <span class="bdr input_celect_items" :class="{'Inputactive':this.InputuserName}">
            <input type="text" class="number_input bdr" placeholder="请输入收货人姓名" v-model="username" @blur="isblurname()" @focus="isnumbernameS()">
          </span> -->
          <!-- 手机号 -->
          <span class="bdr input_celect_items" :class="{'Inputactive':this.InputHandset}">
            <!-- <input type="text" class="number_input bdr" placeholder="请输入您的手机号码" v-model="wechet" @blur="isblurhandset()" @focus="isnumberhandsetS()"> -->
            <input type="number" pattern="\d"  class="number_input bdr" placeholder="请输入您的手机号码" v-model="wechet" @blur="isblurhandset()" @focus="isnumberhandsetS()">
          </span>
          <!-- 商品描述 -->
          <textarea name="a" class="bdr input_celect_items textarea_input" placeholder="请您用简短的文字描述您的需求" v-model="datailst"></textarea>
          <!-- 点击提交 -->
          <button class="bdr input_celect_items btn_inpit_seccess" @click="ajaxPost()">发布并支付</button>
        </div>
      </aside>
    </div>
  </section>
</template>
<script>
var throttle = require('lodash/throttle');
var Base64 = require('js-base64').Base64;
import bus from '@/assets/bus/js/bus.js'
export default {
  data(){
    return{
      searchBarFixedS:false,
      deta_service:false, //这是
      Inputactive:false,
      InputuserName:false,
      InputHandset:false,
      number:'', //数量
      username:'',//姓名
      wechet:'',//手机号
      datailst:'',//详细文字描述
      textLi:'', //teb选项
      listtypeS:'', //行业 
      postertypeS:'', // 类型
      daySnumberD:'', //要求时间
      listtypeSindex:'', //行业下标 
      postertypeSindsex:'', // 类型下标
      daySnumberDindex:'', //要求时间下标
      contmosryget:'',
      number1s:false,
      contmosryget1s:false,
      daySnumberD1s:false,
      tebli:[
        {
          text:'行业',
          ind:true,
          prace:'#prace1',
        }
        ,{
          text:'内容',
          ind:false,
          prace:'#prace2',
        }
        ,{
          text:'要求',
          ind:false,
          prace:'#prace3',
        }
      ],
      listtype:[
        {
          img:'resticon.png',
          ind:true,
          text:'餐饮业',
          parameter:'10',
        }
        ,{
          img:'cloticon.png',
          ind:false,
          text:'服装业',
          parameter:'11',          
        }
        ,{
          img:'retail.png',
          ind:false,
          text:'零售业',
          parameter:'16',
        }
        ,{
          img:'entert.png',
          ind:false,
          text:'娱乐休闲业',
          parameter:'13',
        }
        ,{
          img:'salon.png',
          ind:false,
          text:'美容美发业',
          parameter:'12',
        }
        ,{
          img:'train.png',
          ind:false,
          text:'培训业',
          parameter:'15',
        }
        ,{
          img:'baby.png',
          ind:false,
          text:'母婴业',
          parameter:'14',
        }
        ,{
          img:'other.png',
          ind:false,
          text:'其他',
          parameter:'17',
        }
      ],
      posterList:[
        {
          img:'poster.png',
          ind:true,
          text:'海报',
          parameter:'00',
        }
        ,{
          img:'images.png',
          ind:false,
          text:'图片视频',
          parameter:'0100',
        }
        ,{
          img:'rela.png',
          ind:false,
          text:'实拍视频',
          parameter:'0101',
        }
        ,{
          img:'animation.png',
          ind:false,
          text:'动画视频',
          parameter:'0102',
        }
      ],
      daySnumber:[
        {
          text:'24小时内',
          parameter:'20',
        },
        {
          text:'三天内',
          parameter:'21',
        }
        ,{
          text:'五天内',
          parameter:'22',
        }
        ,{
          text:'七天内',
          parameter:'23',
        }
        ,{
          text:'十天内',
          parameter:'24',
        }
      ],
      contmosrygetS:[
        {
          dayStext:'300.00',
          dayStexttrue:true,
        },
        {
          dayStext:'500.00',
          dayStexttrue:true,
        },
          {
          dayStext:'700.00',
          dayStexttrue:true,
        },
      ],
      ordernumberS:[
        {
          dayStext:'1',
        },
        {
          dayStext:'2',
        }
        ,{
          dayStext:'3',
        }
        ,{
          dayStext:'4',
        }
        ,{
          dayStext:'5',
        }
        ,{
          dayStext:'6',
        }
        ,{
          dayStext:'7',
        }
        ,{
          dayStext:'8',
        }
        ,{
          dayStext:'9',
        }
        ,{
          dayStext:'10',
        }
      ],
      // dayStext1:'24小时内',
      // dayStext2:'200.00',
      dayStext3:'1',
      touck:'',
      coordinateX:'',
      coordinateY:'',
    }
  },
  methods:{
    isshow(index,selector){ //这里可以循环三组teb切换
      this.isFor(index,this.tebli)   
      // this.textLi= this.tebli[index].text;  //最后的值是要给后面的我内容
      this.isScrllTop(selector)
    },
    isIMGtype(index){
      this.isFor(index,this.listtype)   
      this.listtypeS = this.listtype[index].text;  //这是以防止不点
      this.isScrllTop('#prace2')
      this.listtypeSindex = this.listtype[index].parameter //获取到要出入的从参数
    },
    isIMGlist(index){
      this.isFor(index,this.posterList)   
      this.postertypeS = this.posterList[index].text; 
      this.isScrllTop('#prace3')
      this.postertypeSindsex = this.posterList[index].parameter //获取到要出入的从参数 
    },
    isScrllTop(selector){
      let anchor = document.querySelector(selector);
      let h = document.querySelector('#paraceOffseTop'); // 获取teb的高度      
      let getComse =  h.currentStyle ? h.currentStyle.paddingTop : window.getComputedStyle(h,null).paddingTop;
      let getIf = parseInt(getComse) //获取之后就是带Px 转成number 
      document.body.scrollTop = anchor.offsetTop - getIf; // chrome
      document.documentElement.scrollTop = anchor.offsetTop -getIf; // firefox
      window.pageYOffset = anchor.offsetTop - getIf  
      
      // let wh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 
      // let navH = document.getElementById('prace1').offsetHeight; //行业的高度
      // let navH1 = document.getElementById('prace2').offsetHeight; //类型的高度
      // let navH2 = document.getElementById('prace3').offsetHeight; //需求的高度
      // console.log(wh,navH)
      // var h = document.getElementById('paraceOffseTop'); // 获取teb的高度            
      // var getComse =  h.currentStyle ? h.currentStyle.paddingTop : window.getComputedStyle(h,null).paddingTop;
      // var getIf = parseInt(getComse) //获取之后就是带Px 转成number
      // document.body.scrollTop = anchor.offsetTop - getIf; // chrome
      // document.documentElement.scrollTop = anchor.offsetTop -getIf; // firefox
      // window.pageYOffset = anchor.offsetTop - getIf
      // if(wh <(navH)){
      //   this.isFOr(0)
      //   var anchor = document.getElementById('prace1');
      //   console.log(anchor)
      //   document.body.scrollTop = anchor.offsetTop - getIf; // chrome
      //   document.documentElement.scrollTop = anchor.offsetTop -getIf; // firefox
      //   window.pageYOffset = anchor.offsetTop - getIf

      // }else if(wh <(navH + navH1)- getIf){
      //   this.isFOr(1)       
      //   var anchor = document.getElementById('prace2');
      //   console.log(anchor)
      //   document.body.scrollTop = anchor.offsetTop - getIf; // chrome
      //   document.documentElement.scrollTop = anchor.offsetTop -getIf; // firefox
      //   window.pageYOffset = anchor.offsetTop - getIf
      // }else if(wh <(navH + navH1 + navH2)){
      //   this.isFOr(2)
      //   var anchor = document.getElementById('prace3');
      //   console.log(anchor)
      //   document.body.scrollTop = anchor.offsetTop - getIf; // chrome
      //   document.documentElement.scrollTop = anchor.offsetTop -getIf; // firefox
      //   window.pageYOffset = anchor.offsetTop - getIf
      // }
      
    },
    isFor(index,boo){
      for(var i = 0;i<boo.length;i++){
       boo[i].ind = false;
      }
      boo[index].ind = true;
    },
    isblurname(){ //name 离开
      let name = /^([\u4e00-\u9fa5]){2,7}$/;
      if(this.username == '' || !name.test(this.username)){
        this.InputuserName = true;
      }
    },
    isnumbernameS(){ //name 获取
      let name = /^([\u4e00-\u9fa5]){2,7}$/;
      if(this.username == '' || !name.test(this.username)){
        this.InputuserName = false;
        this.username = ''
      }
    },
    bordernumber(){
      if(this.number != ''){
        this.number1s = false;
      }else{
        this.number1s = true;
      }
    },
    bordernumberfcx(){
        // console.log(this.$iosAndroid.versions.ios)
      if (this.$iosAndroid.versions.ios) {
        if(this.number == ''){
          this.number = 1;
        }
      }
    },
    bordercontmosryget(){
      if(this.contmosryget != ''){
        this.contmosryget1s = false;
      }else{
         this.contmosryget1s = true;
      }
    },
    bordercontmosrygetfcx(){    
      if (this.$iosAndroid.versions.ios) {
         if(this.contmosryget == ''){
          this.contmosryget = '300.00' ;
        }
      }
    },
    chengIFCLick(cc,ss,aa){
      let d = cc; //循环对象.
      let f = ss; //v-model参数 
      let g = aa
      var j = 0;
      for(var i in d){  //循环数组下标
        d[i].ind = false   
        if(d[i].text == f){ //这是判断是不是文字一样
          let j = i;    
          d[j].ind = true
          g =d[j].parameter
          if(aa == 'listtypeSindex'){
            this.listtypeSindex = d[j].parameter  // v-model 下标
          }else if(aa == 'postertypeSindsex'){
            this.postertypeSindsex = d[j].parameter  // v-model 下标
          }else if(aa == 'daySnumberDindex'){
            this.daySnumberDindex = d[j].parameter  // v-model 下标
          }
        }
      }
      if(this.daySnumberD != ''){
        this.daySnumberD1s = false;
      }else{
        this.daySnumberD1s = true;
      }
    },
    chengIFCLickfcx(){
      if (this.$iosAndroid.versions.ios) {
         if(this.daySnumberD == ''){
          this.daySnumberD = '24小时内';
          this.daySnumberDindex = '20';
        }
      }
    },
    isblurhandset(){ //手机 离开
      let handset = /^1[3|4|5|8][0-9]\d{4,8}$/;
      let handsetS =  /^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;
      if(this.wechet == '' || !handset.test(this.wechet) || handsetS.test(this.wechet)){
        this.InputHandset = true;
      }
    },
    isnumberhandsetS(){
      let handset = /^1[3|4|5|8][0-9]\d{4,8}$/;
      let handsetS =  /^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;
      if(this.wechet == '' || !handset.test(this.wechet) || handsetS.test(this.wechet)){
        this.InputHandset = false;
        this.wechet = ''
      }
    },
    ajaxPost(){
      var _this = this; 
      //获取touck
        _this.touck = sessionStorage.getItem('token')
        var str = Base64.decode(_this.touck)   //转义
        var objad = String(str).split("{")
        var objadf = String(objad).split("}")
        var objaS = String(objadf).split(',')
      //数组裁切
        var obja = new Object();      
        for (var x in objaS){
          if(objaS[x] != ''){
            var split = objaS[x].split(':');
            if(/^\"|\"$/.test(split[0]) == true){
              var d = split[0].substring(1,split[0].length-1)
            }
            if(/^\"|\"$/.test(split[1]) == true){
              var f = split[1].substring(1,split[1].length-1)
            }
            obja[d] = f;
          }
        }
      //获取name
        let shou = obja.name
      // 调用接口
        if(_this.touck != null || _this.touck != undefined ){ //判断有没有code
          if(shou != null && shou != undefined && shou != ''){ //判断有没有手机号
            if(_this.number == ''){ //这是判断姓名
              _this.number1s = true;
            }else if(_this.contmosryget == ''){ //这是判断姓名
              _this.contmosryget1s = true;
            }else if(_this.daySnumberD == ''){ //这是判断姓名
              _this.daySnumberD1s = true;
            }else if(_this.wechet == '' || !bus.number().test(_this.wechet)){
              _this.InputHandset = true;
            }else{
              this.$store.dispatch('showloader')
              var usertaskifon = {
                "demand":{
                    "demandType":this.listtypeSindex,
                    "requirements":this.postertypeSindsex,
                    "univalent":this.contmosryget,
                    "quantity":this.number,
                    "contactNumber":this.wechet,
                    "requireTime":this.daySnumberDindex,
                    "demandIntroduction":this.datailst == '' ?null :this.datailst
                },
                "demandEnclosures":[]
              }
              // console.log(usertaskifon)
              this.axios.post( this.$busPoat.publish(),usertaskifon).then(response=>{
                var st;
                clearTimeout(st)
                st = setTimeout(() =>{
                  if(response != null || response != undefined){
                    this.$store.dispatch('hideloader')                                      
                    if(response.data.iplancode == 200){
                      sessionStorage.setItem('usertaskifonS',JSON.stringify(response.data.demand))
                      this.$router.push({path:'/bomNav/taskDetail'})
                      this.wechet = ''
                      this.datailst = ''
                    }else if(response.data.iplancode == 105){
                      alert('该任务已经发布但是未支付，请前去支付')    
                      // this.$router.push({path:'/bomNav/taskDetail'})                 
                    }else if(response.data.iplancode == 106){
                      alert('发任务已经发布')                     
                    }else{
                      alert('发布任务失败')
                    }
                }else{
                  this.$store.dispatch('hideloader')
                  alert('请求加载过慢...')
                }
                clearTimeout(st)                                                                       
              },2000)
              }).catch(error=>{
                this.$store.dispatch('hideloader')                                  
                alert('发布中断失败')
                // console.log(error)
              })
            }
          }else{
            alert('亲，请登录手机号')
            this.$router.push({path:'/bomNav/Verification'})
          }
        }else{
          var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxfefc1188cb991ef1&redirect_uri=http%3a%2f%2fwww.iplan-ad.com%2fapp%2f%23%2fbomNav%2ftaskContent&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
          location.replace(url)
        }
    },
    handleScrollS() {
      // let h = document.querySelector('#searchBarS').offsetTop; // 获取teb的高度
      let h = document.querySelector('#paraceOffseTop'); // 获取teb的高度
      let getComse =  h.currentStyle ? h.currentStyle.paddingTop : window.getComputedStyle(h,null).paddingTop;
      let getIf = parseInt(getComse) //获取之后就是带Px 转成number
      let wh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 
      let navH = document.querySelector('#prace1').offsetHeight; //行业的高度
      let navH1 = document.querySelector('#prace2').offsetHeight; //类型的高度
      let navH2 = document.querySelector('#prace3').offsetHeight; //需求的高度
      if(wh <(navH)){
        this.isFOr(0)
        // this.deta_service = true 
      }else if(wh <(navH + navH1)- getIf){
        this.isFOr(1)       
      }else if(wh <(navH + navH1 + navH2)){
        this.isFOr(2)
      }
    },
    isFOr(index){
      // console.log(this.InConTeb.ind)
      for(var i = 0;i<this.tebli.length;i++){
        this.tebli[i].ind = false
      }
       this.tebli[index].ind = true
    },
    getposterdilaste(){ //点击详情介绍
      this.$router.push({
        path:'/bomNav/taskposterDetails'
      })
      // let scrollTop = window.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop || 0; 
      let anchor = document.querySelector('#prace2').offsetTop;
      let h = document.querySelector('#paraceOffseTop'); // 获取teb的高度      
      let getComse =  h.currentStyle ? h.currentStyle.paddingTop : window.getComputedStyle(h,null).paddingTop;
      let getIf = parseInt(getComse)
      // let clientHeightDFG = document.documentElement.clientHeight
      this.$store.state.scrollToptask.scrolltask = anchor - getIf
      console.log(this.$store.state.scrollToptask.scrolltask)   
    }
  },
  created(){
    for(var i = 0;i<this.listtype.length;i++){ //这是默认选择的
      if(this.listtype[i].ind == true){
        var j = i;
        this.listtypeS = this.listtype[j].text;
        this.listtypeSindex = this.listtype[j].parameter;
      }
    }
    for(var i = 0;i<this.posterList.length;i++){
      if(this.posterList[i].ind == true){
        var j = i;
        this.postertypeS = this.posterList[j].text;
        this.postertypeSindsex = this.posterList[j].parameter;
      }
    }
    let coordinateSDF = this.$store.getters.scrolltask
    if(coordinateSDF != null ||  coordinateSDF != undefined){
      window.pageYOffset = coordinateSDF
      document.documentElement.scrollTop  = coordinateSDF
      document.body.scrollTop = coordinateSDF
      this.$store.state.scrollToptask.scrolltask = null
    }
  },
  // watch: {

  // },
  mounted() {
    //写在掉接口的里面的
    this.$nextTick(() => {
      //这里使用监听的scroll的事件，为什么要使用的节流函数，如果不使用的，页面一直在滚动计算的，这样在
      //使用手机时候，出现非常卡的，隔一段时间计算，大大降低了性能的消耗（具体的好处自己去查资料）
      window.addEventListener('scroll',this.throttleScroll,false);
    });
    this.throttleScroll = throttle(this.handleScrollS,0);
  },
  destroyed() { //离开清楚
    window.removeEventListener('scroll',this.throttleScroll);
  },
}
</script>
<style lang="scss" scoped>
.Task_con_box{
  background: #f2f2f2;
}
.task_UL_teb{
  // margin-top:.2rem;
  width: 100%;
  padding:.2rem .4rem;
  height: 1.1rem;
  // margin-bottom:.4rem;
  background: #fff;      
  .task_li_text{
    background: #fff;
    width: 33.33%;
    height: 100%;
    font-size:.28rem;
    color:#666;
    border: .01rem solid #dedede;
    // border-right: .01rem solid #dedede;
    text-align: center;
    line-height: .7rem;
    &:last-child{
      border-left:0;      
      -webkit-border-top-right-radius: .1rem;
     -moz-border-radius-topright: .1rem;
          border-top-right-radius: .1rem;
      -webkit-border-bottom-right-radius:.1rem;
         -moz-border-radius-bottomright:.1rem;
              border-bottom-right-radius:.1rem;
    }
    &:first-child{
      border-right:0;
       -webkit-border-top-left-radius: .1rem;
          -moz-border-radius-topleft: .1rem;
               border-top-left-radius: .1rem;
      -webkit-border-bottom-left-radius:.1rem;
         -moz-border-radius-bottomleft:.1rem;
              border-bottom-left-radius:.1rem;
    }
  }
  .li_active{
    background: #999999;
    color:#fff;
  }
}
.task_list_item1{
  width: 100%;
  padding:0rem .4rem;
  // height: 9.08rem;  //因为要做楼层
  .list_title{
    width: 100%;
    height: 0.25rem;
    color:#333;
    text-align: center;
    font-size:.24rem;
    align-self:center;
    font-weight: 600;
  }
  // .over_fled{
    // overflow: hidden;
    // width: 6.4em;
  // }
  .list_con_type_box{
    width: 100%;
    padding:.4rem 0rem;
    .list_text_con{
      height: 1.8rem;
      width: 48%;
      background: #fff;
      margin-bottom:.2rem;
      padding:.3rem 0rem;
      i{
        width: 0.7rem;
        height: 0.7rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
      span{
        margin-top:.2rem;
        width: 100%;
        text-align: center;
        font-size:.24rem;
        color:#999;
        font-weight: 600;
      }
    }
    .list_type_poster{
      width: 100%;
      height: 2rem;
      margin-bottom:.1rem;
      .poster_bg{
        width: 100%;
        height: 100%;
      }
    }
    .list_text_con_active{
      background: #fff;
      background-image: url('../../../static/images/task/activeList.png');
      background-position-x: right;
      background-position-y: top;
      -moz-background-size:30%;
      background-size: 30%;
      background-repeat: no-repeat;
    }
    .list_type_poster_active{
      background-image: url('../../../static/images/task/activeList.png');
      background-position-x: right;
      background-position-y: top;
      background-size: 15%;
      -moz-background-size:15%;
      background-repeat: no-repeat;
    }
    .input_celect_items{
      width: 100%;
      height: 0.7rem;
      background: #fff;
      margin-bottom:.12rem;
      padding-left:.4rem;    
      font-family: Arial, Helvetica, sans-serif;  
      .option_styler{
        width: 100% !important;
        height: 0.3rem !important;
        font-size: .12rem !important;
        color:#333 !important;
        font-family: Arial, Helvetica, sans-serif;
      }    
    }
    .input_celect_modelBPX{
      position: relative;
      p{
        width: 100%;
        height: 100%;
        line-height: .7rem;
        color: #999;
        font-size: .24rem;
        letter-spacing:.02rem;
      }
      .input_celect{
        position: absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        width: 100%;
        height: 100%;
        padding-left:.4rem;
        background:transparent;
        color:transparent;
      }
      .color_model_ipt{
        font-size:.24rem;
        color:#333;
        font-family: Arial, Helvetica, sans-serif;
      }
    }
    select {  
      appearance:none;  
      -moz-appearance:none;  
      -webkit-appearance:none;  
      border:0;
      padding-right: 14px;  
    }
    select::-ms-expand { display: none; } 
    .number{
      margin-bottom:.5rem;
    }
    .number_input{
      width: 100%;
      height: 100%;
      font-size:.24rem;
      color:#333;
      // font-weight: 600;
    }
    .clear_bg{  
       background-image: url("../../../static/images/task/bg_seleace.png");
      background-position-x: 92%;
      background-position-y: center;
      -moz-background-size: 4%;
           background-size: 4%;
      background-repeat: no-repeat;
    }
    .textarea_input{
      resize:none;
      padding-top:.3rem;
      height: 2rem;
    }
    .btn_inpit_seccess{
        height: 0.8rem;
        background: #FF7200;
        color:#fff;
        font-size:.3rem;
        padding:0rem;
    }
    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
      color: #999;
      font-size: .24rem;
      // font-weight: 600; 
      letter-spacing:.02rem;
    } 
    input:-moz-placeholder, textarea:-moz-placeholder { 
      color: #999;
      font-size: .24rem;
      letter-spacing:.02rem;
      // font-weight: 600; 
    } 
    input::-moz-placeholder, textarea::-moz-placeholder { 
      color: #999;
      letter-spacing:.02rem;
      font-size: .24rem;
      // font-weight: 600; 
    } 
    input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
      color: #999;
      letter-spacing:.02rem;
      font-size: .24rem;
      // font-weight: 600; 
    } 
  }
  .iconsingseas_top{
    padding-bottom:0;
  }
  .list_con_iconsingseas{
    width: 100%;
    background: #303030;
    height: 1rem;
    margin-bottom:.5rem;
    span{
      height: 100%;
      color:#fafafa;
      font-size: .28rem;
      line-height: 1rem;
      text-align: center;
    }
    .dialse_lf{
      width: 85%;
    }
    .dialse_lr{
      width: 15%;
      line-height: 1.3rem;
      img{
        width: 50%;
        height: 50%;
      }
    }
  }
}
.Inputactive{
    border:.02rem solid #FF7200 !important;  
  .number_input{
    color:#FF7200  !important;
    font-family: Arial, Helvetica, sans-serif;
  }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    color: #ff7200 !important;
  } 
  input:-moz-placeholder, textarea:-moz-placeholder { 
    color: #ff7200 !important;
  } 
  input::-moz-placeholder, textarea::-moz-placeholder { 
    color: #ff7200 !important;
  } 
  input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
    color: #ff7200 !important;
  } 
}
.isFixed{
  position:fixed;
  top:0.8rem;
  z-index:60;
  // background: #fff;    
  // padding:.4rem;
  // width: 100%;
  // margin:0rem ;
  // margin-bottom:0.4rem ;
}
.deta_service_active2{
  // margin-top:1.5rem;
  padding-top:1.5rem;
  position: relative;
  width: 100%;
  height: 100%;
}
.deta_service_active{
//  margin-top:1.2rem;
  // margin-top:1.5rem;
//  padding-top:1.5rem;
}

</style>


